CSS Input Group

Easily extend form inputs by adding text, buttons, or button groups
on either side of textual inputs, custom selects, and custom file inputs.

What is CSS Input Group ?

A CSS input group is a design pattern that combines multiple input elements, such as text fields, buttons, and dropdowns, into a single cohesive unit.

CSS input groups are a great way to create cohesive, easy-to-use form elements by grouping inputs, buttons, dropdowns, and more. With Astral.CSS, you can easily extend your form inputs by adding extra elements like text, buttons, or button groups—either inside or around your input fields. This design pattern provides extra context or options, like appending a unit to a number or adding a dropdown for selecting country codes.

What is a CSS Input Group?

A CSS input group allows you to combine multiple form elements, such as text fields, dropdowns, buttons, or icons, into a single, unified component. This is especially useful when you want to provide users with more options in a compact, easy-to-use way, like adding a domain to an email address or selecting a country for a phone number. By using CSS, you can control the layout, spacing, and alignment of the input group elements to make them look seamless and professional.

How to Create a Basic CSS Input Group

Astral.CSS lets you create input groups quickly and easily. Here are some examples to get you started:

Example 1: Adding an "@" symbol to an input field

@

Example 2: Adding a domain to the input field

@example.com

Example 3: Adding a URL prefix to an input

https://example.com/users/

Example 4: Adding currency symbols to an amount input

$ .00
@ 



  @
  






  
  @example.com




  

    https://example.com/users/
    
 




  $
  
  .00






  
  @

Adding Buttons to Your Input Group

You can also extend input groups with buttons to offer users even more functionality. Buttons can be placed inside or alongside your input fields.

Example 1: Adding a button before the input field

Example 2: Adding a button after the input field

Example 3: Adding two buttons to an input field

Form Select

CSS input groups also support custom selects and custom file inputs, which aren't available in default browser styles.

Example 1: Adding a custom select field

Example 2: Select field with addon on the right

File

Why Use CSS Input Groups?

CSS input groups are a great way to improve the functionality and visual appeal of your forms. Whether you're adding buttons, dropdowns, or extra text to provide more context, input groups allow you to keep everything neat, organized, and easy for users to interact with. With Astral.CSS, it’s simple to integrate these features into your forms, enhancing both usability and design.